<script setup>
	import { defineProps, ref } from 'vue'
	import { http } from '@/utils/http.js'

	const info = ref()
	const { thegoods, maskindex, boxId } = defineProps([
		'thegoods',
		'maskindex',
		'boxId',
	])
	const emit = defineEmits(['close-mask'])
	function closemask() {
		emit('close-mask')
	}
	const theIndex = ref(maskindex)
	info.value = thegoods[theIndex.value]
	// 上一个
	function pre() {
		if (theIndex.value == 0) {
			uni.utils.toast('已经是第一个了~')
			++theIndex.value
			return
		} else {
			theIndex.value--
			info.value = thegoods[theIndex.value]
		}
	}
	// 下一个
	function next() {
		console.log(JSON.parse(JSON.stringify(thegoods)).nv_length)
		if (
			theIndex.value ==
			JSON.parse(JSON.stringify(thegoods)).nv_length - 1
		) {
			uni.utils.toast('已经是最后一个了~')
			--theIndex.value
			return
		} else {
			theIndex.value++
			info.value = thegoods[theIndex.value]
		}
	}
	// 滑动切换
	const startPoint = ref()
	function touchStart(e) {
		console.log(e)
		startPoint.value = e.changedTouches[0].screenX
	}
	function touchEnd(e) {
		console.log(e)
		if (startPoint.value > e.changedTouches[0].screenX) {
			next()
		} else {
			pre()
		}
	}
	//收藏
	async function hope(id) {
		const res = await http.request({
			url: '/api/goods/scPost',
			method: 'POST',
			data: {
				id: id,
				type: '2',
				box_id: boxId,
			},
		})
		console.log(res)
		if (res.st == 1) {
			if (info.value.is_sc == 1) {
				info.value.is_sc = 0
			} else if (info.value.is_sc == 0) {
				info.value.is_sc = 1
			}
			uni.showToast({
				title: '操作成功',
				duration: 2000,
			})
		} else {
			uni.showToast({
				title: '操作失败',
				icon: 'error',
				duration: 2000,
			})
		}
	}
</script>

<template>
	<view class="mask" @tap.stop="closemask">
		<view class="icon" @tap.stop="closemask">
			<uni-icons type="closeempty" color="#fff" size="30"></uni-icons>
		</view>
		<view class="content">
			<view class="img">
				<view class="aim leftone" @tap.stop="pre"> </view>
				<image
					style="height: 100%"
					:src="info.img"
					mode="heightFix"
					@touchstart="touchStart"
					@touchend="touchEnd"
				></image>
				<view class="aim rightone" @tap.stop="next"> </view>
			</view>
			<view class="goods_name">
				{{ info.goods_name }}
			</view>
			<view class="detail">
				<view class="price">
					<text class="title">参考价</text>
					<text>{{ `￥${info.price}` }}</text>
				</view>
				<view class="type">
					<text class="title">状态</text>
					<text>{{ info.goods_type == 1 ? '预售' : '现货' }}</text>
				</view>
				<view class="like" @tap.stop="hope(info.goods_id)">
					<text class="title">收藏</text>
					<uni-icons
						style="margin-top: 10rpx"
						:type="info.is_sc == 0 ? 'heart' : 'heart-filled'"
						color="#E169D3"
						size="17"
					></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		z-index: 2;
		height: 100vh;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: RGBA(26, 19, 63, 0.8);

		.icon {
			text-align: right;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				position: relative;
				width: 650rpx;
				height: 80vw;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				.aim {
					width: 59rpx;
					height: 55rpx;
					background-color: pink;
				}
				.leftone {
					position: absolute;
					left: 0;
					background: url('https://ojqn.wm2177.com/wechat_imgs/wx/leftone.png')
						no-repeat;
					background-size: 100%;
				}
				.rightone {
					position: absolute;
					right: 0;
					background: url('https://ojqn.wm2177.com/wechat_imgs/wx/rightone.png')
						no-repeat;
					background-size: 100%;
				}
			}

			.goods_name {
				margin-bottom: 30rpx;
				font-size: 32rpx;
			}

			.detail {
				display: flex;
				// flex-direction: column;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				width: 100%;
				border-radius: 10rpx;
				padding: 0 40rpx;
				border: 2rpx solid $all-color;
				box-sizing: border-box;
				background-color: RGBA(26, 19, 63, 0.9);
				font-size: 22rpx;
				line-height: 24rpx;
				.title {
					margin-right: 20rpx;
					font-size: 26rpx;
				}
				.price {
					display: flex;
					align-items: center;
				}
				.type {
					display: flex;
					align-items: center;
				}
				.like {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>
